<template>
    <div>
        

        <div v-if="drawerVisible" class="mask"></div>
        <transition :name="this.direction=='left'?'slide-right':'slide-left'">
            <div v-if="drawerVisible" @click.stop="close" class="drawer">
                 <div class="drawer_body"  @click.stop=""  
                    :style="{'right':direction=='right'?'0':'auto', 
                            'left':direction=='left'?'0':'auto',
                            'width':width+'%','background':background,
                            'overflow-y':scroll?'scroll':'hidden' }">

                        <!-- 页头标题 -->
                        <slot name="header">
                            <div v-if="title||closeBtn" class="title"
                                :style="{'justify-content':title?'space-between':'flex-end'}" >
                                <div v-if="title">
                                    {{title}}
                                </div>
                                <el-button  v-if="closeBtn" circle size="mini" icon="el-icon-close" @click="close" ></el-button>
                            </div>
                        </slot>
                        
                        <div style="min-height:80vh;padding: 5px 0">
                            <slot></slot>
                        </div>

                        <!-- 页脚信息 -->
                        <slot name="footer">
                            <div class="footer">
                                <el-button size="mini" type="primary" @click="footerOk">确认</el-button>
                                <el-button size="mini" @click="footerCal">取消</el-button>
                            </div>
                        </slot>
                        
                </div>
            </div>
        </transition>

         
    </div>
   
</template>


<script>
export default {
    watch: {
        drawerVisible(n, o) {
            if (n == true) {
                document.documentElement.style.overflowY = "hidden";
                document.documentElement.style.overflowX = "hidden";
            }
        }
    },
    props: {
        // 是否显示drawer
        drawerVisible: Boolean,
        // drawer方向
        direction: {
            type: String,
            validator(val) {
                return ["right", "left"].indexOf(val) !== -1;
            }
        },
        // drawer宽度
        width: {
            type: Number,
            default: 40
        },
        // drawer背景色
        background: {
            type: String,
            default: "#ffffff"
        },
        // 是否显示遮罩层
        mask: {
            type: Boolean,
            default: true
        },
        // drawer标题
        title: String,
        // 是否显示关闭按钮
        closeBtn: {
            type: Boolean,
            default: true
        },
        // 是否开启滚动
        scroll: {
            type: Boolean,
            default: true
        },
        footerOk: Function,
        footerCal: Function
    },
    methods:{
        close() {
            this.$emit("update:drawerVisible", false);
        },
        close() {
            this.$emit("update:drawerVisible", false);
            this.$emit("close");
        }
    }
};
</script>



<style scoped>
    .drawer {
        position: absolute;
        height: 100vh;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        z-index: 1000000 !important;
    }
    .drawer .drawer_body {
        height: 100%;
        position: absolute;
        z-index: 1000001;
        background-color: #fff;
    }
    .mask {
        height: 100vh;
        width: 100vw;
        position: absolute;
        z-index: 1000000;
        top: 0;
        left: 0;
        background-color: #000;
        opacity: 0.5;
    }


    .slide-right-enter-active,
    .slide-right-leave-active,
    .slide-left-enter-active,
    .slide-left-leave-active {
        will-change: transform;
        transition: transform 300ms;
        position: absolute;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }
    .slide-right-enter,
    .slide-right-leave-active {
        transform: translate(-100%, 0);
    }
    .slide-left-leave-active,
    .slide-left-enter {
        transform: translate(100%, 0);
    }
    
    .title{
        display: flex;
        padding:10px 10px; 
        
    }

    .footer {
        border-top: 0.1px solid #ddd;
        display: flex;
        justify-content: flex-end;
        padding-top: 10px;
    }

</style>